<template>
  <div class="card card-3d h-full group">
    <div class="relative overflow-hidden rounded-t-lg h-48">
      <img
        :src="baseUrl + project.image"
        :alt="project.title"
        class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
      />
      <div
        class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
      ></div>
      <div
        class="absolute bottom-0 left-0 w-full p-4 transform translate-y-full transition-transform duration-300 group-hover:translate-y-0"
      >
        <div class="flex flex-wrap gap-2">
          <span v-for="tag in project.tags" :key="tag" class="tech-badge">
            {{ tag }}
          </span>
        </div>
      </div>
    </div>
    <div class="p-5">
      <h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">
        {{ project.title }}
      </h3>
      <p class="text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">
        {{ project.description }}
      </p>
      <router-link
        :to="`projects/${project.id}`"
        class="text-primary dark:text-code-accent font-medium hover:underline inline-flex items-center"
      >
        查看详情
        <i class="pi pi-arrow-right ml-1"></i>
      </router-link>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  name: "ProjectCard",
  props: {
    project: {
      type: Object,
      required: true,
    },
  },
  setup() {
    return {
      baseUrl: import.meta.env.VITE_staticHost || "",
    };
  },
};
</script>

<style scoped>
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
